<!--suppress ALL -->
<template>
  <div :class="radarClass" :id="radarId"></div>
</template>

<script>
  import echarts from "echarts";

  export default {
    props:{
      radarClass:{
        type:String,
        required:true
      },
      radarId:{
        type:String,
        required:true
      }
    },
    data() {
      return {
        id: 1,
        option : {
          radar: [{
            indicator: [{
              name: '服务态度',
              max: 100
            }, {
              name: '企业业绩',
              max: 100,
              axisLabel: {
                show: false
              }
            }, {
              name: '资质情况',
              max: 100,
              axisLabel: {
                show: false
              }
            }, {
              name: '信用评价',
              max: 100,
              axisLabel: {
                show: false
              }
            }, {
              name: '质量评价',
              max: 100,
              axisLabel: {
                show: false
              }
            }],
            center: ['50%', '60%'],
            radius: '60%',
            // startAngle: 90,
            splitNumber: 5,
            shape: 'polygon',
            triggerEvent: true,
            silent: true,
            scale: true,
            // nameGap:2,
            name: {
              formatter: '{value}',
              textStyle: {
                color: '#333',
                fontSize: 16
              }
            },
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#e6e6e6'
              }
            },
            axisTick: {
              show: true
            },
            axisLabel: {
              show: true,
              color: '#9e9e9e'
            },
            splitLine: {
              lineStyle: {
                color: '#e6e6e6'
              }
            }
          }],
          series: [{
            name: '雷达图',
            type: 'radar',
            areaStyle: {
              normal: {
                color: 'rgba(23,139,246,0.7)'
              }
            },
            lineStyle: {
              normal: {
                color: '#178bf6',
                width: 2
              }
            },
            data: [{
              value: [70, 60, 40, 50, 60],
              symbol: 'circle',
              symbolSize: 6,
              itemStyle: {
                normal: {
                  color: '#178bf6'
                }
              }
            }]
          }]
        }

      };
    },
    mounted() {
      this.init();
      //console.log(this.radarClass,this.radarId)
    },
    methods: {
      init() {
        this.myChart = echarts.init(document.getElementById(this.radarId));
        this.myChart.setOption(this.option)
      },
    }
  };
</script>

<style scoped>

</style>

